<template>
	<view class="wrap">
		<view class="content">
			<view class="item">
				<view class="title">补卡时间</view>
				<view class="date" @click="showtime = true;">
					<text>{{check  ? $dateFormat(date, 2) : '请选择时间'}}</text>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="title">补卡理由</view>
				<view class="text">
					<u--textarea v-model="reason" placeholder="请输入" count></u--textarea>
				</view>
			</view>
			<view class="item">
				<view class="title">图片</view>
				<view class="img_wrap" @click="handleImage">
					<image v-if="!image" src="/static/img/censece/upload.png" mode="widthFix"></image>
					<image v-else :src="fullimage" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="handleSubmit">提交</view>
		</view>
		
		<u-datetime-picker :show="showtime" :max-date="mindate"  @close="showtime=false" @cancel="showtime=false" @confirm="handleTime"
			v-model="date" mode="datetime"></u-datetime-picker>
	</view>
</template>

<script>
import { baseURL } from '../../../api/base'
import { apply } from '../../../api/manager'

	export default {
		data () {
			return {
				date: Number(new Date()),
				showtime: false,
				mindate: Number(new Date()),
				reason: '',
				image: '',
				fullimage: '',
				check:false
			}
		},
		
		methods: {
			handleTime (e) {
				this.showtime = false;
				this.check = true
			},
			
			handleImage () {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						let avatarUrl = res.tempFilePaths
						// console.log(avatarUrl);
						uni.uploadFile({
							url: baseURL + 'company/common/upload',
							filePath: avatarUrl[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token') //自定义请求头信息 
							},
							formData: {
								user: 'test'
							},
							success: uploadFileRes => {
								// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
								let data = JSON.parse(uploadFileRes.data) 
								that.image = data.data.url
								that.fullimage = data.data.fullurl
								that.$forceUpdate()
							},
							fail: (error) => {
								uni.showToast({
									title: '上传失败',
									duration: 2000
								});
							}
						});
					}
				});
			},
			
			async handleSubmit () {
				if (!this.date) {
					uni.$u.toast('请选择时间')
					return
				}
				if (!this.reason) {
					uni.$u.toast('请填写事由')
					return
				}
				if (!this.image) {
					uni.$u.toast('请上传图片')
					return
				}
				let params = {
					type: 1,
					start_time: this.$dateFormat(this.date, 2),
					remark: this.reason,
					image: this.image
				}
				let res = await apply(params)
				uni.$u.toast(res.msg)
				setTimeout(() => {
					uni.navigateBack()
				}, 1200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #F2F2F2;
		box-sizing: border-box;
		
		.content {
			padding: 15px 15px 70px;
			box-sizing: border-box;
			
			.item {
				padding: 12px;
				border-radius: 10px;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 15px;
				
				.title {
					font-size: 16px;
					margin-bottom: 15px;
				}
				
				.date {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					text {
						font-size: 16px;
					}
				}
				
				.img_wrap {
					height: fit-content;
					
					image {
						width: 100%;
					}
				}
			}
		}
		
		.bottom {
			width: 100%;
			padding: 12px;
			height: 70px;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			
			.btn {
				width: 100%;
				height: 42px;
				line-height: 42px;
				text-align: center;
				background-color: #0a84ff;
				color: #fff;
				font-size: 16px;
				border-radius: 8px;
				box-sizing: border-box;
			}
		}
	}
</style>